<template>
  <div class="left_list_wrapper" style="border: 0px solid red;background-color: #545c64">
    <div class="left_list_inner" style="border: 0px solid red;">
      <el-col :span="30">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
          <el-menu-item index="1" @click="goto('similar')">
            <i class="el-icon-menu"></i>
            <span slot="title">相似单词</span>
          </el-menu-item>
          <el-menu-item index="2" @click="goto('review')">
            <i class="el-icon-menu" ></i>
            <span slot="title">背诵单词</span>
          </el-menu-item>
          <el-menu-item index="3" @click="goto('fanyi')">
            <i class="el-icon-document"></i>
            <span slot="title">查看翻译</span>
          </el-menu-item>
          <el-menu-item index="4" @click="goto('statis')">
            <i class="el-icon-setting"></i>
            <span slot="title">查看统计</span>
          </el-menu-item>
          <el-menu-item index="5" @click="goto('addword')">
            <i class="el-icon-setting"></i>
            <span slot="title" >添加单词</span>
          </el-menu-item>
          <el-menu-item index="6" @click="goto('sys')">
            <i class="el-icon-setting"></i>
            <span slot="title">系统设置</span>
          </el-menu-item>
        </el-menu>
      </el-col>
    </div>
  </div>
</template>

<script>
    export default {
      name: "LeftList",
      data(){
        return {
          list: ['背诵单词', '查看翻译', '查找单词', '统计单词', '系统设置']
        }
      },
      methods: {
        goto(info){
          if (info == 'fanyi'){
            this.$router.replace("/index/fanyi")
          }
          if (info == 'addword'){
            console.debug("router replace index/addword")
            this.$router.replace("/index/addword")
          }
          if (info == 'statis'){
            console.debug("router replace index/statis")
            this.$router.replace("/index/statis")
          }
          if(info == 'similar'){
            this.$router.replace("/index/similar")
          }
          if (info == 'review'){
            this.$router.replace("/index/review")
          }
          if (info == 'sys'){
            this.$router.replace("/index/sys")
          }
        }
      }
    }
</script>

<style scoped>
  .left_list_inner .el-menu-item {
    width: 170px;
  }
</style>
